<template scroll="auto">
  <div  class="musicApp">
    <StarTrailingTail/>
    <div class="musicBox">
      <!--      歌曲栏-->
      <el-card class="Mleft body-style fadeInLeft animated" :body-style="{padding: '0px'}">
        <div class="MleftTitle">
          <div class="titleBox">
            <h2 style="font-size:30px;font-weight: 800">歌曲播放列表</h2>
            <div class="Mdelete">
              <span>{{ musicList.length }}首歌</span>
              <el-button icon="el-icon-delete" circle></el-button>
            </div>
          </div>
          <div class="musicListBox">
            <template>
              <div class="infinite-list-wrapper" style="overflow:auto; height: 100%">
                <ul
                    class="list"
                    infinite-scroll-disabled="disabled">
                  <li v-for="(item,index) in musicList" class="list-item" :key="item.id"
                      @mouseenter="ismusicshow(index,item.musicshow)"
                      @mouseleave="ismusicshow(index,item.musicshow)">
                    <div :class="item.showMusicClass" class="musicListItemBox" >
                      <div class="MItitle" >
                        <div style="display: flex; ">
                          <h2 style="font-weight: 700;">{{ item.name }} </h2>
                          <img  @click="playMusicMv(item,index)" style="margin-left: 15px; cursor: pointer;" v-show="item.blblMvSrc!=null" src="../../../../assets/MV.png"/>
                        </div>

                        <span>{{ item.author }}</span>
                      </div>
<!--                      切换-->
                      <div >
                        <div class="MIbox" v-show="item.musicshow" >
                          <span>{{ item.time }}</span>
                        </div>
                        <div class="MIbox" v-show="!item.musicshow" >
                          <div style="display: flex">
                            <div style="margin-right: 15px" class="delhover" @click="playmusic(item,index)">
                              <i class="fa fa-play-circle el-icon-caret-right" aria-hidden="true" ></i>
                            </div>
                            <div class="delhover" @click="deletemusic(item,index)">
                              <i style="font-size:16px;" class="fa fa-trash el-icon-delete-solid" aria-hidden="true" ></i>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>
                  </li>
                </ul>
              </div>
            </template>
          </div>
        </div>
      </el-card>

      <el-card class="Mmin body-style fadeInDown animated"    >
<!--        播放mv的时候切换-->
        <div  style="position: relative;">
          <transition name="el-zoom-in-left" >
            <div v-show="!isPlayMusicMv" style="opacity: 1;">
              <iframe style="width: 100%; height: 75vh" :src="isPlayMusicMvSrc" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
            </div>

          </transition>
          <transition name="el-zoom-in-left">
            <div  v-show="isPlayMusicMv" style="display: flex;height: 700px;">
              <div :class="animationcp"  style="width: 50%;position: relative; height: 100%">
                <div id="musicImage" ref="rotate">
                  <div class="song-img"  :style="`background-image: url(${showMusic.coverImg})`">
                  </div>
                </div>
              </div>

              <div style="flex: 1; margin-top: 50px; color: red; height: 700px">
                <div style="letter-spacing: 20px">
                  <h2 style="font-size: 50px;font-weight: 800"><b>{{ showMusic.name }}</b></h2>
                  <span style="font-size: 25px ;font-weight: 700">{{ showMusic.author }}</span>
                </div>
                <div style="margin-top: 300px">
                  <span style="font-size: 30px">暂无歌词</span>
                </div>

              </div>
            </div>
          </transition>

        </div>

      </el-card>

      <el-card class="Mright body-style  fadeInRight animated">
        <div class="tagBox">
          <div><el-tag size="medium " @click="searchtag(1)">周杰伦</el-tag></div>
          <div><el-tag type="success" size="medium" @click="searchtag(2)">林俊杰</el-tag></div>
          <div><el-tag type="info" size="medium " @click="searchtag(3)">邓紫棋</el-tag></div>
          <div><el-tag type="warning" size="medium " @click="searchtag(4)">五月天</el-tag></div>
          <div><el-tag type="danger" size="medium " @click="searchtag(5)">凤凰传奇</el-tag></div>
        </div>
        <div class="MRtitleBox">
          <h2 >搜索歌曲</h2>
        </div>
        <div class="searchBox">
          <el-input v-model="musicName"/> <el-button type="danger" @click="search"><i class="fa fa-search el-icon-search" aria-hidden="true"></i></el-button>
        </div>
        <div class="showSearchMusic">
          <div v-show="showSearchMusic.length == 0" class="defaultSearch">
            <h2>暂无数据</h2>
          </div>
          <div v-show="showSearchMusic.length != 0" class="musicListBox">
            <template>
            <div class="infinite-list-wrapper" style="overflow:auto; height: 100%">
              <ul
                  class="list"
                  infinite-scroll-disabled="disabled">
                <li v-for="(item,index) in showSearchMusic" class="list-item" :key="item.id">
                  <div class="musicListItemBox">
                    <div class="MItitle">
                      <h2 style="font-weight: 700;">{{ item.name }}</h2>
                      <span>{{ item.author }}</span>
                    </div>
                    <!--                      切换-->
                    <div style="display: flex; align-items: center;" >
                      <div class="MIbox"  >
                        <span>{{ item.time }}</span>
                      </div>
                      <div style="display: flex;margin-left: 15px">
                        <div style="margin-right: 15px" class="delhover" @click="addmusic(item,index)">
                          <i class="fa fa-plus-square " aria-hidden="true" style="clear: red"></i>
                        </div>

                      </div>
                    </div>

                  </div>
                </li>
              </ul>
            </div>
          </template>
          </div>
        </div>

      </el-card>
    </div>
    <div style="position: absolute; bottom: 0; width: 100%; text-align: center" class="playerBox">
      <div class="player">

        <div class="myPlayer" style="position: relative">
          <div style="position: absolute; top: 0;height: 10px;width: 100%;  text-align: center">
<!--            <el-progress :percentage="1"-->
<!--                         type="line"-->
<!--                         color="red"-->
<!--                         :show-text="false"-->
<!--            > </el-progress>-->
            <audio
                ref="Ref_audioPlayer"
                :src="showMusic.audioSrc"
                autoplay
                @ended="overAudio"
                @pause="onPause"
                @play="onPlay"
                @loadeddata="loadeddata"
                @loadedmetadata="onLoadedmetadata"
                @timeupdate="onTimeupdate"
            ></audio>

            <!-- 音频播放控件 -->
            <div>
<!--              <div>-->
<!--                <div style="font-size: 15px;font-weight: 900; display: flex; background: rgba(0,0,0,0.7);width: 100px;margin-left: 20px;margin-top: -20px;border-radius: 25px">-->
<!--                  <div style=" ">{{ audio.currentTime | formatSecond}}</div>-->
<!--                  <span style="margin: 0 10px">/</span>-->
<!--                  <div style=" ">{{ audio.maxTime | formatSecond}}</div>-->
<!--                </div>-->
<!--                <el-slider class="slider" @touchstart="handleTouchStart" v-model="sliderTime" :show-tooltip="false" :format-tooltip="formatProcessToolTip" @change="currentRateChange">-->

<!--                </el-slider>-->
<!--              </div>-->


              <div class="slider" @touchstart="handleTouchStart" @change="currentRateChange" >
                <div class="slider-track" ></div>
                <div class="slider-fill" :style="'width:'+sliderTime+'%'"></div>
                <div class="slider-thumb" :style="'left:'+sliderTime+'%'">
                  <div style="font-size: 15px;font-weight: 900; display: flex; background: rgba(0,0,0,0.7);width: 100px;margin-left: 20px;margin-top: -20px;border-radius: 25px">
                    <div style=" ">{{ audio.currentTime | formatSecond}}</div>
                    <span style="margin: 0 10px">/</span>
                    <div style=" ">{{ audio.maxTime | formatSecond}}</div>
                  </div>
                </div>
              </div>

              <div style="display: inline-block; float: right; margin-right: 15px;">{{ audio.maxTime | formatSecond}}</div>
            </div>
          </div>

          <div class="controlBox" style="margin-top: 20px" >
            <div style=" margin-left: 100px;display: flex;width: 10%">
              <div>
                <img :src="showMusic.coverImg" style="width: 70px; height: 70px; border-radius: 15px; ">
              </div>
              <div style="color: red;margin-left: 20px;">
                <h2 style="font-size: 15px;font-weight: 600">{{showMusic.name}}</h2>
                <span style="font-size: 10px;color: #8c939d">{{showMusic.author}}</span>
              </div>
            </div>

            <div style="flex: 1;padding-top: 20px;display: flex;justify-content:space-between;">
              <div style="flex: 1; color: red; text-align: center; display: flex;align-items: center;justify-content:space-around">
                <i style="font-size: 40px;" class="fa fa-step-backward el-icon-caret-left" aria-hidden="true" @click="isnext(true)" ></i>
                <i
                    type="primary"
                    v-if="playstatus"
                    @click="pause"
                    class="fa fa-pause-circle pointer el-icon-video-pause"
                    aria-hidden="true"
                    style="font-size: 60px"
                ></i>
                <i type="primary"
                   v-else @click="play"
                   class="fa fa-play-circle-o pointer el-icon-video-play" aria-hidden="true"
                   style="font-size: 60px">

                </i>
                <i style="font-size: 40px;" class="fa fa-step-forward pointer el-icon-caret-right" aria-hidden="true" @click="isnext(false)"></i>
              </div>
              <div style="float: right; width: 400px">
                <div class="block" style="width: 200px;display: flex;color: red">
                  <i v-show="showMusicVolume!=0" class="fa fa-volume-up el-icon-microphone" aria-hidden="true" style="font-size: 20px; line-height: 38px;margin-right: 20px" @click="showMusicVolume=0"></i>
                  <i v-show="showMusicVolume===0" class="fa fa-volume-off el-icon-turn-off-microphone " aria-hidden="true" style="font-size: 20px; line-height: 38px;margin-right: 35px" @click="showMusicVolume=50"></i>
                  <el-slider style="width: 150px" v-model="showMusicVolume" :format-tooltip="formatTooltip" label="%"></el-slider>
                </div>
              </div>

            </div>

          </div>
        </div>
      </div>

    </div>
    <transition name="bounce">
      <div v-show="showMusic.coverImg" class="bg-blur" :style="`background-image:url(${showMusic.coverImg})`"></div>
    </transition>



  </div>
</template>

<script>

// 将整数转换成 时：分：秒的格式
function realFormatSecond(second) {
  var secondType = typeof second

  if (secondType === 'number' || secondType === 'string') {
    second = parseInt(second)

    var hours = Math.floor(second / 3600)
    second = second - hours * 3600
    var mimute = Math.floor(second / 60)
    second = second - mimute * 60

    return   + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
  } else {
    return '0:00:00'
  }
}

import StarTrailingTail from "@/common/StarTrailingTail";
export default {
  name: "Home",
  components:{StarTrailingTail},
  data() {
    return {
      playstatus: false,
      isDraging: false,
      animationcp: '',
      marks: {
        0: "0",
        100: "100",
      },
      currentRate: 0,
      musicList: [],
      showdelete: true,
      showMusic: {},
      showMusicVolume: 50, //默认音量
      audio: {
        // 该字段是音频是否处于播放状态的属性
        playing: false,
        // 音频当前播放时长
        currentTime: 0,
        // 音频最大播放时长
        maxTime: 0,
        minTime:0,
        step:0.1
      },
      sliderTime: 0.0,
      showMusicIndex: 0,//播放列表下标
      musicName: '', //搜索
      showSearchMusic: [], //搜索后的结果
      isPlayMusicMv: true, //播放mv
      isPlayMusicMvSrc: "",  //mv地址
    }
  },
  created() {
    this.animationcp = 'zoomInDown animated'
    setTimeout(()=>{
      this.animationcp = ''
    },1000)
    this.load()
  },
  mounted() {

  },
  methods:{

    load(){
      this.request.get("/music").then(res=>{
        if(res.code === "200"){
          this.musicList = res.data

          this.showMusic =this.musicList[this.showMusicIndex]
          for (var i = 0; i < this.musicList.length; i++) {
            this.$set(this.musicList[i],'musicshow',true)
            this.$set(this.musicList[i],'showMusicClass',"")
          }
          this.musicList[this.showMusicIndex].showMusicClass = "showMusicClass" //默认显示
        }
      })
    },
    ismusicshow(index,musicshow){
      this.musicList[index].musicshow = !musicshow;
    },
    //列表点击播放音乐
    playmusic(item,index){
      this.animationcp = 'zoomInDown animated'
      setTimeout(()=>{
        this.animationcp = ''
      },1000)
      this.showMusic = item; //赋值给播放的容器
      this.showMusicIndex =index; //存储下标
      this.playstatus = false;
      this.isPlayMusicMv = true;
    },
    //列表点击删除音乐
    deletemusic(item,index){
      this.musicList.splice(index,1)
    },
// 监听audio标签的音频加载完成事件
    loadeddata() {
      // 需等音频加载完成，才能获取到音频的时长
      this.marks["100"] = this.s_to_MS(this.$refs.Ref_audioPlayer.duration);
    },
    // 当加载语音流元数据完成后，会触发该事件的回调函数
    // 语音元数据主要是语音的长度之类的数据
    onLoadedmetadata(res) {

      this.audio.maxTime = parseInt(res.target.duration)
    },


    // 监听audio标签的播放事件
    onPlay() {
      this.playstatus = true;
      this.audio.playing = true;
      this.$refs.rotate.style.animationPlayState = 'running';
    },
    // 监听audio标签的暂停事件
    onPause() {
      this.playstatus = false;
      this.audio.playing = false;
      this.$refs.rotate.style.animationPlayState = 'paused';
    },
    // 监听audio标签的停止播放事件
    overAudio() {
      console.log("我播放完了")
      this.showMusicIndex++;
      if(this.showMusicIndex >this.musicList.length){

      }else {
        this.showMusic = this.musicList[this.showMusicIndex]
      }

      this.playstatus = false;
    },
    // 监听audio标签的播放进度改变事件
    onTimeupdate(res) {
      this.audio.currentTime = res.target.currentTime
      this.sliderTime = this.audio.currentTime / this.audio.maxTime * 100
    },
    // 秒数转换分+秒
    s_to_MS(s) {
      let m;
      m = Math.floor(s / 60);
      s = Math.floor(s % 60);
      m += "";
      s += "";
      s = s.length == 1 ? "0" + s : s;
      if (isNaN(m)) {
        return "&infin;";
      }
      return m + ":" + s;
    },



    // 原创面板——播放
    play() {
      this.$refs.Ref_audioPlayer.play();
      this.audio.playing = true;
      this.$refs.rotate.style.animationPlayState = 'running';

    },

    // 原创面板——暂停
    pause() {
      this.$refs.Ref_audioPlayer.pause();
      this.$refs.rotate.style.animationPlayState = 'paused';
      this.audio.playing = false;
    },

    // 原创面板——重新播放
    replay() {
      this.$refs.Ref_audioPlayer.currentTime = 0;
      this.$refs.Ref_audioPlayer.play();
    },

    // 上一首或者下一首
    move(val) {

      this.$refs.Ref_audioPlayer.currentTime += val;
      this.$refs.Ref_audioPlayer.play();
    },
    //切换上一首下一首 true是上一首 false是下一首
    isnext(flag){
      this.animationcp = 'zoomInDown animated'
      setTimeout(()=>{
        this.animationcp = ''
      },1000)
      if(!flag){
        this.showMusicIndex ++;
        if(this.showMusicIndex+1>this.musicList.length){
          this.showMusicIndex=0;
        }
        this.showMusic = this.musicList[this.showMusicIndex]

      }else {
        this.showMusicIndex --;
        if(this.showMusicIndex<0){
          this.showMusicIndex=this.musicList.length;
        }
        this.showMusic = this.musicList[this.showMusicIndex]
      }
    },

    // 原创面板——点击/拖拽原创面板进度条
    currentRateChange(newVal) {
      console.log("我是干嘛的",newVal)
      this.$refs.Ref_audioPlayer.currentTime = Math.round(
          (newVal / 100) * this.$refs.Ref_audioPlayer.duration
      );
      this.sliderTime = this.$refs.Ref_audioPlayer.currentTime
      this.$refs.Ref_audioPlayer.play();
    },
    handleTouchStart(e) {
      console.log("我是干嘛的")
      this.setValue(e.touches[0]);
      e.preventDefault();
      this.onDragStart(e);
    },

    // 进度条格式化toolTip
    formatProcessToolTip(index = 0) {
      index = parseInt(this.audio.maxTime / 100 * index)
      return '进度条: ' + realFormatSecond(index)
    },
    formatTooltip(val) {
      this.$refs.Ref_audioPlayer.volume = val / 100
      return val ;
    },
    // 拖动进度条，改变当前时间，index是进度条改变时的回调函数的参数0-100之间，需要换算成实际时间
    changeCurrentTime(index) {
      console.log('拖动进度条')
      this.$refs.Ref_audioPlayer.currentTime = parseInt(index / 100 * this.audio.maxTime)
    },
    //search搜索
    search(){
      this.request.get("/music/search/",{
        params:{
          name: this.musicName,
        }
      }).then(res=>{
        if(res.code === "200"){
          this.showSearchMusic = res.data;
          for (var i = 0; i < this.showSearchMusic.length; i++) {
            this.$set(this.showSearchMusic[i],'musicshow',true)
          }
        }else {
          this.showSearchMusic = []
        }
      })
    },
    //添加到播放列
    addmusic(item,index){
      this.musicList.push(item)
      this.showSearchMusic.splice(index,1)
    },
    //标签搜索
    searchtag(val){
      switch (val){
        case 1:
          this.musicName = "周杰伦"
          this.search()
          break;
        case 2:
          this.musicName = "林俊杰"
          this.search()
          break;
        case 3:
          this.musicName = "邓紫棋"
          this.search()
          break;
        case 4:
          this.musicName = "五月天"
          this.search()
          break;
        case 5:
          this.musicName = "凤凰传奇"
          this.search()
          break;
      }
    },
    //播放mv
    playMusicMv(item,index){
      this.pause()
      this.isPlayMusicMv = false;
      this.isPlayMusicMvSrc = item.blblMvSrc;
      this.showMusic = item;
      this.showMusicIndex =index;
      // this.pause()
    }
  },
  filters: {
    // 使用组件过滤器来动态改变按钮的显示
    transPlayPause(value) {
      return value ? '暂停' : '播放'
    },
    // 将整数转化成时分秒
    formatSecond(second = 0) {
      return realFormatSecond(second)
    }
  },
  watch:{
    //监视播放列表好切换背景
    showMusic(newVal,lodVal){
      if(lodVal!=null){
        lodVal.showMusicClass = ""
        newVal.showMusicClass = "showMusicClass"
      }
    }
  }

}
</script>

<style scoped lang="less">

.musicApp {
  margin-top: 50px;
  .musicBox {
    margin: 0 auto;
    width: 90%;
    height: 80vh;
    display: flex;


    .Mleft {
      width: 20%;
      opacity: 0.8 !important;
      background: rgb(219, 219, 219);


      .MleftTitle {
        font-size: 20px;
        height: 80vh;
        text-align: center;
        display: flex;
        flex-direction: column;


        span {
          height: 30px;
          line-height: 30px;
          text-align: left;
          flex: 1;
          font-size: 15px;
        }

        .titleBox {
          padding: 20px;

          .Mdelete {
            margin-top: 10px;
            display: flex;
          }
        }

        .musicListBox {
          margin-top: 50px;
          flex: 1;
          height: 70%;
          .musicListItemBox {
            padding: 10px;
            display: flex;

            .MItitle {

              text-align: left;
              flex: 1;

              h2 {
                font-size: 18px;
              }

              span {
                font-size: 7px;
              }
            }

            .MIbox {
              line-height: 50px;
            }

          }

          .musicListItemBox:hover, .musicListItemBox.hover {
            background: rgb(243, 243, 244);
          }

          .showMusicClass{
            background:  rgb(243, 243, 244);
          }


        }

      }

    }

    .Mmin {
      flex: 1;
      width: 70%;
      margin: 0 20px;
      text-align: center;
      //background: #99a9bf;
      opacity: 0.7!important;
      background: rgb(3, 3, 3);
      border: none;



    }

    .Mright {
      width: 20%;
      opacity: 0.8 !important;

      .tagBox{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        clear: both;
        div{
          height: 50px;
          width: 33.33%;
          text-align: center;
        }
      }

      .MRtitleBox{
        padding: 10px;
        h2{
          font-size: 30px;
          text-align: center;
          font-weight: 800;
        }
      }

      .searchBox{
        display: flex;
        margin-bottom: 50px;
      }
      .showSearchMusic{
        width: 100%;
        height: 500px;
        //border-top: 1px solid #c9c9c9;

        .defaultSearch{
          text-align: center;
          h2{
            font-size: 20px;
            font-weight: 800;
          }

        }

        .musicListBox {
          margin-top: 50px;
          flex: 1;
          height: 100%;
          .musicListItemBox {
            padding: 10px;
            display: flex;

            .MItitle {

              text-align: left;
              flex: 1;

              h2 {
                font-size: 18px;
              }

              span {
                font-size: 7px;
              }
            }

            .MIbox {
              line-height: 50px;
            }

          }

          .musicListItemBox:hover, .musicListItemBox.hover {
            background: rgb(243, 243, 244);
          }


        }

      }
    }
  }
}

.delhover:hover{
  color: red;
  cursor: pointer;
}

.body-style {
  border-radius: 15px;
}


.el-card__body, .el-main {
  padding: 0;
}

::-webkit-scrollbar {
  width: 7px;
}
/* 滚动槽 */

::-webkit-scrollbar-track {

  -webkit-box-shadow: inset 0 0 6px rgb(135, 135, 135);

  border-radius: 10px;

  background-color: #bfbfbf;

}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb{

  border-radius: 10px;

  background: #e2e2e2;

  Box-shadow: inset 0 0 6px rgb(255, 255, 255);

}
::-webkit-scrollbar-thumb:window-inactive {

  background: #ffffff;

}

/* 边角 即两个滚动条的交汇处 */

::-webkit-scrollbar-corner{

  background: #b1d1ff;

  border-radius: 10px;

}

/* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件*/

::-webkit-resizer{

}
#musicImage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 45vh;
  height: 45vh;
  border-radius: 50%;
  //transform: rotate(45deg);
  background-image: radial-gradient(3.5em 30em ellipse, #fff, #000);
  border: 2px solid #131313;
  box-shadow: 0 0 0 10px #343935;
  opacity: 1;
  z-index: 10000;
  animation: animations1 10s linear infinite forwards;
  animation-play-state: paused;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}
.song-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 75%;
  height: 75%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid #000;
  border-radius: 50%;
  animation: animations1 10s linear infinite forwards;
  animation-play-state: paused;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

@keyframes animations1 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.bg-blur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(20px);
  z-index: -100;
}

.playerBox{
  
  opacity: 0.9;
  .player{
    display: flex;
    background: white;
    .myPlayer {
      border-radius: 10px;
      flex: 1;
      height: 10vh;


      .controlBox {
        display: flex;
        font-size: 30px;
        color: #409eff;

      }
    }
  }
}


//播放器
.btnBox {
  flex: 1;

  justify-content: space-evenly;
  flex-wrap: wrap;
  align-content: space-around;
}
.container {
  text-align: center;
  max-width: 100%;
  margin: auto;
}
.listBox {
  text-align: left;
}
.musicItem {
  line-height: 40px;
  cursor: pointer;
}



.progressbar{
  margin-top: -15px;
}

.slider {
  margin-top: -5px;
  width: 100%;
  position: relative;
  height: 10px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
  outline: none;
}

.slider-track {
  position: absolute;
  height: 2px;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1px;
  background-color: #bec2c1;
}

.slider-fill {
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: #e92e35;
  vertical-align: middle;
  left: 0;
  top: 50%;
  margin-top: -1px;
}

.slider-thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background-color: #e92e35;
  vertical-align: middle;
  color: #e92e35;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
// 控制滑块的默认颜色
/deep/ .el-slider__bar{
  background: red;
}

/deep/.el-slider__button{
  background: red;
  border: none;
}
span,h1,h2,h3,h4,i{
  caret-color: transparent;
  cursor: pointer;
}














//过度动画

/*the animation definition*/
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft
}


/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight
}


/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown
}


/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}


/*the animation definition*/
@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
  }
}
@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -ms-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown
}



</style>